<!DOCTYPE html>

<html>
<head>
  <title>tutorial.coffee</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" media="all" href="public/stylesheets/normalize.css" />
  <link rel="stylesheet" media="all" href="docco.css" />
</head>
<body>
  <div class="container">
    <div class="page">

      <div class="header">
        
          <h1>tutorial.coffee</h1>
        

        
          <div class="toc">
            <h3>Table of Contents</h3>
            <ol>
              
                
                <li>
                  <a class="source" href="admin.html">
                    admin.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.auditData.html">
                    api.auditData.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.auditEvent.html">
                    api.auditEvent.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.html">
                    api.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.entity.html">
                    api.entity.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.map.html">
                    api.map.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.server.html">
                    api.server.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.variable.html">
                    api.variable.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.view.html">
                    api.view.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="app.instance.html">
                    app.instance.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="appjs.html">
                    appjs.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="data.html">
                    data.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="dataUtil.html">
                    dataUtil.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="manager.html">
                    manager.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="messages.html">
                    messages.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="auditData.html">
                    auditData.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="auditEvent.html">
                    auditEvent.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="base.html">
                    base.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="entityDefinition.html">
                    entityDefinition.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="entityObject.html">
                    entityObject.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="eventAction.html">
                    eventAction.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="eventRule.html">
                    eventRule.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="link.html">
                    link.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="map.html">
                    map.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="shape.html">
                    shape.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="user.html">
                    user.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="userSettings.html">
                    userSettings.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="variable.html">
                    variable.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="adminRoutes.html">
                    adminRoutes.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="appRoutes.html">
                    appRoutes.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="settings.html">
                    settings.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="sockets.html">
                    sockets.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="tutorial.html">
                    tutorial.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="vectors.html">
                    vectors.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="statusTabView.html">
                    statusTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="toolsTabView.html">
                    toolsTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="usersTabView.html">
                    usersTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="adminView.html">
                    adminView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="alertView.html">
                    alertView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="auditDataManagerView.html">
                    auditDataManagerView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="auditEventManagerView.html">
                    auditEventManagerView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="baseView.html">
                    baseView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="createMapView.html">
                    createMapView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="entityManagerView.html">
                    entityManagerView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="footerView.html">
                    footerView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="helpView.html">
                    helpView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="entitiesTabView.html">
                    entitiesTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="inspectorTabView.html">
                    inspectorTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="mapTabView.html">
                    mapTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="shapeTabView.html">
                    shapeTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="controlsView.html">
                    controlsView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="labelEditView.html">
                    labelEditView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="linkCreatorView.html">
                    linkCreatorView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="linkLabelsView.html">
                    linkLabelsView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="linkView.html">
                    linkView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="shapeLabelsView.html">
                    shapeLabelsView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="shapeView.html">
                    shapeView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="shapesMoverView.html">
                    shapesMoverView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="mapView.html">
                    mapView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="menuView.html">
                    menuView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="overlayView.html">
                    overlayView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="scriptEditorView.html">
                    scriptEditorView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="settingsView.html">
                    settingsView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="startView.html">
                    startView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="variableManagerView.html">
                    variableManagerView.coffee
                  </a>
                </li>
              
            </ol>
          </div>
        
      </div>

      
        
        <h2 id="system-data">System DATA</h2>

        
      
        
        <p>This handles the interactive app tutorial (using the Joyride plugin).
The tutorial steps are defined on the <a href="tutorial.jade">tutorial.jade</a>
file, and its main ID is <code>#tutorial</code>.</p>

        
          <div class='highlight'><pre>SystemApp.Tutorial =</pre></div>
        
      
        
        <p>Holds the joyride object and the &quot;cancelbg&quot; full size div.</p>

        
          <div class='highlight'><pre>    <span class="attribute">$tour</span>: <span class="literal">null</span>
    <span class="attribute">$cancelbg</span>: <span class="literal">null</span></pre></div>
        
      
        
        <p>Define the callbacks for each step. Please make sure to keep these callbacks
in sync with the corresponding index for each step. If you add a new step, the
subsequent callbacks should have their index updated as well!</p>

        
          <div class='highlight'><pre>    <span class="attribute">callbacks</span>:</pre></div>
        
      
        
        <p>Step: Entities. Show entities manager.</p>

        
          <div class='highlight'><pre>        <span class="number">0</span>: <span class="function"><span class="params">()</span> -&gt;</span>
            SystemApp.routes.openEntities()</pre></div>
        
      
        
        <p>Step: Sample Entity Definitions. Create fake &quot;MyEntity&quot;.</p>

        
          <div class='highlight'><pre>        <span class="number">2</span>: <span class="function"><span class="params">()</span> -&gt;</span>
            <span class="function"><span class="title">afterMachine</span> = <span class="params">()</span> -&gt;</span>
                $(<span class="string">"#entitymanager-but-create"</span>).click()
            <span class="function"><span class="title">addMachine</span> = <span class="params">()</span> -&gt;</span>
                SystemApp.Tutorial.simulateTyping $(<span class="string">"#entitymanager-txt-create"</span>), <span class="string">"MyEntity"</span>, afterMachine

            addMachine()</pre></div>
        
      
        
        <p>Step: Entity - Shape Templates. Show the shape template form.</p>

        
          <div class='highlight'><pre>        <span class="number">4</span>: <span class="function"><span class="params">()</span> -&gt;</span>
            $(<span class="string">"#entitymanager-tabheader-shape"</span>).click()</pre></div>
        
      
        
        <p>Step: Audit Data. Show audit data manager.</p>

        
          <div class='highlight'><pre>        <span class="number">5</span>: <span class="function"><span class="params">()</span> -&gt;</span>
            SystemApp.routes.openAuditData()</pre></div>
        
      
        
        <p>Step: Audit Events. Show audit events manager.</p>

        
          <div class='highlight'><pre>        <span class="number">7</span>: <span class="function"><span class="params">()</span> -&gt;</span>
            SystemApp.routes.openAuditEvents()</pre></div>
        
      
        
        <p>Step: Maps. Hide overlays and create a &quot;My Test System&quot; map but only if it doesn&#39;t exist.</p>

        
          <div class='highlight'><pre>        <span class="number">9</span>: <span class="function"><span class="params">()</span> -&gt;</span>
            map = SystemApp.Data.maps.where {<span class="attribute">name</span>: <span class="string">"My Test System"</span>}

            <span class="keyword">if</span> <span class="keyword">not</span> map? <span class="keyword">or</span> map.length &lt; <span class="number">1</span>
                map = SystemApp.Data.maps.create {<span class="attribute">dateCreated</span>: <span class="keyword">new</span> Date(), <span class="attribute">name</span>: <span class="string">"My Test System"</span>}

            SystemApp.routes.showOverlay <span class="literal">false</span>
            SystemApp.routes.navigate <span class="string">"map/"</span> + map.urlKey(), {<span class="attribute">trigger</span>: <span class="literal">true</span>}</pre></div>
        
      
        
        <p>Step: Adding Shapes to the Map.</p>

        
          <div class='highlight'><pre>        <span class="number">10</span>: <span class="function"><span class="params">()</span> -&gt;</span>
            $(<span class="string">"map-ctl-tab-header-entities"</span>).click()</pre></div>
        
      
        
        <p>Starts the tutorial by showing the &quot;Create entities...&quot; tip.</p>

        
          <div class='highlight'><pre>    <span class="attribute">start</span>:<span class="function"> -&gt;</span>
        SystemApp.consoleLog <span class="string">"Tutorial"</span>, <span class="string">"Start at "</span> + <span class="keyword">new</span> Date()

        <span class="property">@$cancelbg</span> = $(<span class="string">"#tutorial-cancelbg"</span>)
        <span class="property">@$cancelbg</span>.show()
        <span class="property">@$tour</span> = $(<span class="string">"#tutorial"</span>).joyride {<span class="attribute">postStepCallback</span>: <span class="property">@postStepCallback</span>, <span class="attribute">postRideCallback</span>: <span class="property">@postRideCallback</span>}</pre></div>
        
      
        
        <p>Called each time the user clicks the &quot;next step&quot; button.</p>

        
          <div class='highlight'><pre>    <span class="attribute">postStepCallback</span>: <span class="function"><span class="params">(index)</span> -&gt;</span>
        callback = SystemApp.Tutorial.callbacks[index]

        <span class="keyword">if</span> callback?
            callback()
            SystemApp.consoleLog <span class="string">"Tutorial"</span>, <span class="string">"Step <span class="subst">#{index}</span> with callback."</span>
        <span class="keyword">else</span>
            SystemApp.consoleLog <span class="string">"Tutorial"</span>, <span class="string">"Step <span class="subst">#{index}</span>."</span></pre></div>
        
      
        
        <p>Called when tour has finished. This will effectively hide the <code>cancelbg</code>.</p>

        
          <div class='highlight'><pre>    <span class="attribute">postRideCallback</span>:<span class="function"> -&gt;</span>
        SystemApp.consoleLog <span class="string">"Tutorial"</span>, <span class="string">"End at "</span> + <span class="keyword">new</span> Date()
        SystemApp.Tutorial.$cancelbg.hide()</pre></div>
        
      
        
        <p>Destroy &quot;MyEntity&quot;.</p>

        
          <div class='highlight'><pre>        SystemApp.Data.entities.getByFriendlyId(<span class="string">"MyEntity"</span>)?.destroy()</pre></div>
        
      
        
        <h2 id="helper-methods">HELPER METHODS</h2>

        
      
        
        <p>Simulate typing on a field, and when finished call the passed callback.</p>

        
          <div class='highlight'><pre>    <span class="attribute">simulateTyping</span>: <span class="function"><span class="params">(field, value, callback)</span> -&gt;</span>
        field.val <span class="string">""</span>
        arr = value.split <span class="string">""</span>
        i = <span class="number">0</span>
        delay = <span class="number">180</span>

        <span class="keyword">while</span> i &lt; arr.length
            setTimeout <span class="function"><span class="params">(() -&gt; field.val(field.val() + <span class="string">""</span> + arr.shift()))</span>, <span class="title">delay</span> * <span class="params">(i + <span class="number">1</span>)</span>
            <span class="title">i</span>++

        <span class="title">setTimeout</span> <span class="title">callback</span>, <span class="title">delay</span> * <span class="params">(arr.length + <span class="number">1</span>)</span>
</span></pre></div>
        
      
      <div class="fleur">h</div>
    </div>
  </div>
</body>
</html>
